<template>
  <div>
    <div v-if="activeData.table.rows">
      <el-divider>题目</el-divider>
      <draggable :animation="340" :list="activeData.table.rows" group="selectItem" handle=".option-drag">
        <div v-for="(item, index) in activeData.table.rows" :key="index" class="select-item">
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input v-model="item.label" placeholder="选项名" size="small" />
          <div class="close-btn select-line-icon" @click="activeData.table.rows.splice(index, 1)">
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px;margin-bottom: 10px">
        <el-button icon="el-icon-circle-plus-outline" style="padding-bottom: 0" type="text"
          @click="addSelectItem(activeData.table.rows)">
          添加选项
        </el-button>
        <el-button icon="el-icon-document-copy" style="padding-bottom: 0" type="text"
          @click="openBatchEditDialogHandle('rows')">
          批量编辑行标题
        </el-button>
      </div>
    </div>
    <div v-if="activeData.table.columns">
      <el-divider>选项</el-divider>
      <draggable :animation="340" :list="activeData.table.columns" group="selectItem" handle=".option-drag">
        <div v-for="(item, index) in activeData.table.columns" :key="index" class="select-item">
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input v-model="item.label" placeholder="选项名" size="small" />
          <!-- 删除 -->
          <div class="close-btn select-line-icon" @click="activeData.table.columns.splice(index, 1)">
            <i class="el-icon-remove-outline" />
          </div>
          <!-- 编辑 -->
          <div class="close-btn select-line-icon" @click="handleColumnItem(activeData.table.columns,index)">
            <i class="el-icon-edit"></i>
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px;margin-bottom: 10px">
        <el-button icon="el-icon-circle-plus-outline" style="padding-bottom: 0" type="text"
          @click="addSelectItem(activeData.table.columns,'columns')">
          添加选项
        </el-button>
        <el-button icon="el-icon-document-copy" style="padding-bottom: 0" type="text"
          @click="openBatchEditDialogHandle('columns')">
          批量编辑列标题
        </el-button>
      </div>
    </div>
    <el-dialog title="批量编辑" :visible.sync="dialogVisible" width="30%">
      <span class="desc-text">每行对应一个选项</span>
      <el-input id="textareaBox" v-model="batchItemValue" type="textarea" ref="textareaBox"
        :autosize="{ minRows: 20, maxRows: 5000}" placeholder="选项1 选项2  选项3 " />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchEditSelectItems">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑列" :visible.sync="editColumnVisible" width="30%">
      <el-form>
        <el-form-item label="列标题" :label-width="formLabelWidth">
          <el-input v-model="columnsLabel" autocomplete="off" style="width:100px;"></el-input>
        </el-form-item>
        <el-form-item label="列宽设置" :label-width="formLabelWidth">
          宽 <el-input v-model="columnsWidth" autocomplete="off" style="width:100px;"></el-input> px
        </el-form-item>
        <el-form-item label="列宽设置(比例)" :label-width="formLabelWidth">
          <el-input type="number" v-model="phoneWidth" autocomplete="off" style="width:100px;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editColumnVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import _ from 'lodash'

  export default {
    name: 'MatrixOption',
    components: {
      draggable
    },
    props: ['activeData'],
    data() {
      return {
        batchItemValue: '',
        batchDataKey: '',
        dialogVisible: false,
        editColumnVisible: false,
        selectColumn: {},
        columnsWidth: 100,
        phoneWidth: 1,
        columnsLabel: '',
        formLabelWidth: '140px',
        copyText: '',
        copyDataArr: []
      }
    },
    watch: {
      dialogVisible: {
        handler(newValue, oldValue) {
          // 切换选中时不触发
          if (newValue) {
            // this.$nextTick(function(){
            //       // 监听 ctrl+v键盘事件
            //       console.log( document.getElementById('textareaBox'),'44444444')
            //       document.getElementById('textareaBox').addEventListener ( 'paste' , (event)  =>  {
            //         // 获取解析 粘贴的文本
            //       var text   =  (event. clipboardData   ||  window.clipboardData ).getData ( 'text' );
            //       console.log(text,'text-----')
            //       var arr = text.split('\r\n')
            //       for (let index = 0; index < arr.length; index++) {
            //           const element = arr[index]
            //         if(this.batchDataKey == 'columns'){
            //             this.copyDataArr.push({
            //               id: new Date().getTime(),
            //               // id: oIndex > -1 && (index< oldData.length) ? oldData[oIndex].id : new Date().getTime()+index,
            //               label: element,
            //               columnsWidth:130
            //             })
            //           }else{
            //             this.copyDataArr.push({
            //               id: new Date().getTime(),
            //               // id: oIndex > -1 && (index< oldData.length) ? oldData[oIndex].id : new Date().getTime()+index,
            //               label: element,
            //             })
            //           }
            //         }
            //       console.log ( this.copyDataArr,'dddddddddd' )
            //   });
            // })
          }
        },
        deep: true
      }
    },
    mounted() {

    },
    methods: {
      handleColumnItem(column, index) {
        this.editColumnVisible = true
        this.selectColumn = column[index]
        this.columnsWidth = this.selectColumn.columnsWidth
        this.phoneWidth = this.selectColumn.phoneWidth
        this.columnsLabel = this.selectColumn.label
        console.log(column, index, 'ddd')
      },
      addSelectItem(data, flag) {
        if (flag) {
          data.push({
            id: new Date().getTime(),
            label: '',
            columnsWidth: 130,
            phoneWidth: 1
          })
        } else {
          data.push({
            id: new Date().getTime(),
            label: ''
          })
        }

      },
      openBatchEditDialogHandle(key) {
        this.batchDataKey = key
        let data = this.activeData.table[key]
        this.batchItemValue = _.join(data.map(item => item.label), '\n')
        console.log(this.batchItemValue, 'this.batchItemValue444')
        this.dialogVisible = true

      },
      async batchEditSelectItems() {
        const arrStrs = this.batchItemValue
        const arr = arrStrs.split('\n')
        // 获取原来的下标 避免导致id变化
        let oldData = this.activeData.table[this.batchDataKey]
        let labels = oldData.map(item => item.label)
        if (arr.length > 0) {
          const options = []
          for (let index = 0; index < arr.length; index++) {
            const element = arr[index]
            if (element.length > 0) {
              let oIndex = labels.indexOf(element)
              if (this.batchDataKey == 'columns') {
                options.push({
                  id: new Date().getTime() + index,
                  // id: oIndex > -1 ? oldData[oIndex].id : new Date().getTime()+index,
                  label: element,
                  columnsWidth: 130,
                  phoneWidth: 1
                })
              } else {
                options.push({
                  id: new Date().getTime() + index,
                  // id: oIndex > -1  ? oldData[oIndex].id : new Date().getTime()+index,
                  label: element,
                })
              }

            }
          }
          console.log(options, 'options-----------')
          this.$set(this.activeData.table, this.batchDataKey, options)
          this.dialogVisible = false
        }
      },
      submitForm() {
        this.selectColumn.columnsWidth = this.columnsWidth
        this.selectColumn.phoneWidth = this.phoneWidth
        this.selectColumn.label = this.columnsLabel
        this.editColumnVisible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;
    align-items: center;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    & .el-input+.el-input {
      margin-left: 4px;
    }
  }

  .select-item+.select-item {
    margin-top: 4px;
  }

  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }

  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
  }

  .el-icon-edit {
    color: #1890ff
  }

  .option-drag {
    cursor: move;
  }
</style>
